<template>
  <v-page>
    <v-header :title="$t('base.d2')" :left-arrow="false"></v-header>
    <!-- <view style="height: var(--status-bar-height)"></view> -->
    <view
      class="box-size head bg-panel-3 h-aut m-x-md d-flex justify-between flex-wrap align-center bgb3_n rounded-ms color-light"
      :class="theme == 'light' ? 'bgb3-white' : ''"
      style="position: relative"
    >
        <view class="d-flex p-t-md align-center w-max p-x-md">
          <text class="fn-16 color-light d-block fn-bold">{{ $t("base.d6") }}(BTC)</text>
          <view class="fn-18 m-l-md d-flex" @click="setHide(!hideMoney)">
            <van-icon v-if="!hideMoney" name="eye-o" />
            <van-icon v-else name="closed-eye" />
          </view>
        </view>
        <view class="m-t-md d-flex flex-wrap justify-center w-max p-x-md">
          <text class="fn-28 w-max">{{ filterMoney(account.total_assets_btc) }}</text>
          <text class="fn-sm w-max"
            >≈{{ filterMoney(account.total_assets_usd) }} USD</text>
        </view>
        
        <view class="m-t-ms w-max " style="margin-top: 22px !important;background: rgba(43, 43, 43, .2);">
          <!-- <view
            class="d-flex justify-between align-center rounded-lg p-y-sm"
          >
            <v-link
              tag="view"
              to="/pages/assets/recharge"
              class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center shadow-panel-4"
            >
              <view class="m-r-xs d-flex align-center">
                <img
                  src="static/img/13.png"
                  alt=""
                  class="h-25"
                />
              </view>
              <text class="color-light fn-middle fn-ms">{{
                $t("base.b5")
              }}</text>
            </v-link>
            <v-link tag="view" to="/pages/assets/draw" class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center shadow-panel-4">
              <view class="m-r-xs d-flex align-center">
                <img
                  src="static/img/5.png"
                  alt=""
                  class="h-25"
                />
              </view>
              <text class="color-light fn-ms">{{
                $t("base.b6")
              }}</text>
            </v-link>
            <v-link
              tag="view"
              to="/pages/transfer/index"
              class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center shadow-panel-4"
            >
              <view class="m-r-xs d-flex align-center">
                <img
                  src="static/img/hua.png"
                  alt=""
                  class="h-25"
                />
              </view>
              <text class="color-light fn-ms">{{
                $t("base.d8")
              }}</text>
            </v-link>
          </view> -->
		  <view
		    class="d-flex justify-between align-center rounded-lg p-y-sm"
			
		  >
		    <v-link
		      tag="view"
		      to="/pages/assets/recharge"
		      class="d-flex align-center p-y-xxs flex-fill justify-center border-right"
		    >
		      <view class="m-r-xs d-flex align-center">
		        <img
		          src="static/img/13_n.png"
		          alt=""
		          class="h-25"
		        />
		      </view>
		      <text class="color-light fn-middle fn-ms">{{
		        $t("base.b5")
		      }}</text>
		    </v-link>
		    <v-link tag="view" to="/pages/assets/draw" class="d-flex align-center p-y-xxs flex-fill justify-center border-right">
		      <view class="m-r-xs d-flex align-center">
		        <img
		          src="static/img/5_n.png"
		          alt=""
		          class="h-25"
		        />
		      </view>
		      <text class="color-light fn-ms">{{
		        $t("base.b6")
		      }}</text>
		    </v-link>
		    <v-link
		      tag="view"
		      to="/pages/transfer/index"
		      class="d-flex align-center p-y-xxs flex-fill justify-center"
		    >
		      <view class="m-r-xs d-flex align-center">
		        <img
		          src="static/img/13_n1.png"
		          alt=""
		          class="w-25"
		        />
		      </view>
		      <text class="color-light fn-ms">{{
		        $t("base.d8")
		      }}</text>
		    </v-link>
		  </view>
        </view>
    </view>
    
    <view class="layout-main">
        <scroll-view
          @refresherrefresh="onRefresh"
          :refresher-enabled="refresherEnabled&&scrollTop<50"
          :refresher-triggered="refreshing"
          refresher-background="transparent"
          :refresher-threshold="50"
        >
      <!-- 头部 -->
      <view class="tab m-x-md m-t-lg rounded-ms d-flex justify-between bg-c"
      :class="theme == 'light' ? 'bgb3-white' : 'bgb3-white'" style="border: 1px solid rgba(130,138,153,0.4);">
          <view class="w-33 fn-center p-y-ms" :class="tabActive==0?'color-theme-3 bg-panel-4 rounded-xs':''"
          @click="tabActive=0">
              {{$t('base.d7')}}
          </view>
          <view class="w-33 fn-center p-y-ms m-l-xs" :class="tabActive==1?'color-theme-3 bg-panel-4 rounded-xs':''"
          @click="tabActive=1">
              {{$t('base.e4')}}
          </view>
          <view class="w-33 fn-center p-y-ms m-l-xs" :class="tabActive==2?'color-theme-3 bg-panel-4 rounded-xs':''"
          @click="tabActive=2">
              {{$t('otc.d5')}}
          </view>
      </view>
      <view class="top">
        <!-- <van-tabs
          :active="tabActive"
          @change="changtTab"
          :border="false"
          v-if="show"
          :line-width="30"
          swipeable
          animated
          class="tabs-main d-flex justify-between align-center flex-col"
        >
          <van-tab :title="$t('base.d7')" :name="0"> -->
            <view class="box-shadow wallet m-y-md" v-if="tabActive==0">
              <view class="m-x-md m-b-xs m-t-sm">
                  <!--bgb3 :class="theme == 'light' ? 'bgb3-white' : ''" -->
                <view
                  class="p-xs p-x-md rounded-ms bg-c p-b-md"
                  style="position: relative"
                >
                  <text class="fn-20 d-block color-light m-t-xs"
                  >≈{{ filterMoney(account.funds_account_usd) }} </text>
                  <text class="fn-sm d-block color-gray-6 m-t-xs"
                    >{{ $t("base.d6") }}(USDT)</text>

                  <!-- <text class="fn-20 d-block color-light m-t-md"
                    >{{ filterMoney(account.funds_account_btc) }} BTC</text
                  > -->
                  <!-- fn-sm d-block m-t-xs color-gray-6 -->
                  
                  </view>
              </view>

              <view class="d-flex justify-between align-center m-x-md m-y-md">
                <van-field
                  :value="searchText"
                  @input="searchText = $event.detail"
                  left-icon="search"
                  :placeholder="$t('base.d9')"
                  input-class="fn-12 "
                  class="flex-fill color-gray-6 rounded-md pos fn-12 m-r-lg"
                  style="padding-left: 0;border: 1px solid rgba(130,138,153,0.4); padding: 7px;"
                />
                <van-checkbox
                  :value="hide"
                  @change="hide = !hide"
                  icon-size="16"
                >
                <text class="color-gray-6 m-r-xs"
                  >{{ $t("base.e0") }}0{{ $t("base.e1") }}</text
                >
                </van-checkbox>
              </view>
              <router-link
                :to="{
                  path: '/pages/assets/bill',
                  query: { coin_name: item.coin_name },
                }"
                v-show="ifShow(item)"
                class="p-t-xs d-block rounded-md text-none m-x-md m-b-xs m-t-sm bg-c p-sm"
                v-for="(item, index) in list"
                :key="index"
              >
                <view class="d-flex justify-between align-center p-b-xs">
                  <view>
                    <img
                      :src="item.image"
                      class="w-20 h-20 rounded-max fn-middle"
                    />
                    <text class="fn-18 fn-bold color-light fn-middle p-l-sm">{{
                      item.coin_name
                    }}</text>
                  </view>
                  <!-- <view>
                    <text class="fn-lg color-light fn-middle">{{
                      add(
                        item.usable_balance,
                        item.freeze_balance,
                        item.priceDecimals
                      )
                    }}</text>
                    <van-icon
                      class="p-l-xs fn-middle"
                      name="arrow"
                      size="16"
                      color="#646566"
                    />
                  </view> -->
                </view>
                <view class="d-flex justify-between align-center">
                  <view class="w-4/12">
                    <p class="color-gray-6" style="padding: 5px 0">
                      {{ $t("base.b9") }}
                    </p>
                    <p class="fn-lg color-light overflow-scroll">{{ item.usable_balance }}</p>
                  </view>
                  <view class="w-4/12 fn-center">
                    <p class="color-gray-6" style="padding: 5px 0">
                      {{ $t("base.e2") }}
                    </p>
                    <p class="fn-lg color-light overflow-scroll">{{ item.freeze_balance }}</p>
                  </view>
                  <view class="w-4/12 fn-right">
                    <p class="color-gray-6" style="padding: 5px 0">
                      {{ $t("base.e3") }}(USD)
                    </p>
                    <p class="fn-lg color-light overflow-scroll">
                      {{ omitTo(item.usd_estimate, item.priceDecimals) }}
                    </p>
                  </view>
                </view>
                <view class="h-4 m-t-xs"></view>
              </router-link>
            </view>
          <!-- </van-tab>

          <van-tab :title="$t('base.e4')" :name="1" class="p-t-md"> -->
            <view class="m-x-md m-b-xs m-t-sm"  v-if="tabActive==1">
              <!-- <view
                class="bgb3 p-x-md p-y-xs m-y-xs rounded-ms"
                :class="theme == 'light' ? 'bgb3-white' : ''"
                style="position: relative"
              > -->
			  <view
			    class="p-xs p-x-md rounded-ms bg-c p-b-md"
			    style="position: relative"
			  >
                <view class="fn-sm d-flex justify-between color-gray-6 m-t-xs">
                  <span> USDT </span>
                  <v-link class="color-buy" to="/pages/assets/account-bill"
                    >{{ $t("base.e4") }}
                    <van-icon class="fn-middle" name="arrow" size="16"
                  /></v-link>
                </view>
                <span class="fn-20 d-block color-light m-t-md"
                  >{{ filterMoney(account.contract_account_usd)
                  }}{{ account.symbol }}</span
                >
                <view class="d-flex justify-between m-t-xs">
                  <v-link to="/pages/transfer/index" class="d-flex">
                    <view class="m-r-xs align-center">
                      <img
                        :src="$localImgUrl('fill4.png')"
                        alt=""
                        class="h-18"
                      />
                    </view>
                    <!-- <van-icon class="color-theme-1 fn-26 fn-middle m-r-xs" name="exchange" /> -->
                    <text class="color-light fn-middle">{{
                      $t("base.d8")
                    }}</text>
                  </v-link>
                </view>
              </view>
            </view>
            <view class="m-x-md m-b-xs m-t-sm"  v-if="tabActive==2">
              <!-- <view
                class="bgb3 p-x-md p-y-xs m-y-xs rounded-ms"
                :class="theme == 'light' ? 'bgb3-white' : ''"
                style="position: relative"
              > -->
			  <view
			    class="p-xs p-x-md rounded-ms bg-c p-b-md"
			    style="position: relative"
			  >
                <view class="fn-sm d-flex justify-between color-gray-6 m-t-xs">
                  <span> USDT </span>
                  <v-link class="color-buy" to="/pages/assets/currency-bill"
                    >{{ $t("otc.d5") }}
                    <van-icon class="fn-middle" name="arrow" size="16"
                  /></v-link>
                </view>
                
                <text class="d-flex m-t-ms fn-12">
                    <span class="fn-20 color-light m-r-xs"
                  >{{ filterMoney(otc.otc_usable_balance)
                  }}{{ account.symbol }}</span>
                  ({{$t('contract.e4')}})
                </text>
                <text class="d-flex m-t-ms fn-12">
                    <span class="fn-20 color-light m-r-xs"
                  >{{ filterMoney(otc.otc_freeze_balance)
                  }}{{ account.symbol }}</span>
                  ({{$t('otc.d6')}})
                </text>
                <view class="d-flex justify-between m-t-xs">
                  <v-link to="/pages/transfer/index" class="d-flex">
                    <view class="m-r-xs align-center">
                      <img
                        :src="$localImgUrl('fill4.png')"
                        alt=""
                        class="h-18"
                      />
                    </view>
                    <!-- <van-icon class="color-theme-1 fn-26 fn-middle m-r-xs" name="exchange" /> -->
                    <text class="color-light fn-middle">{{
                      $t("base.d8")
                    }}</text>
                  </v-link>
                </view>
              </view>
            </view>
          <!-- </van-tab>
        </van-tabs> -->
      </view>
      </scroll-view>
    </view>
  </v-page>
</template>
<script>
import { mapState, mapActions } from "vuex";
import Wallet from "@/api/wallet";
import math from "@/utils/class/math.js";
import Contract from "@/api/contract.js";
export default {
  name: "mine",
  data() {
    return {
      account: {},
      list: [],
      tabActive: 0, // 切换选择
      searchText: "",
      hide: false,
      show: false,
      accountDetail: {},
      scrollTop:0,
      refreshing:false,
      otc:{}
    };
  },
  computed: {
    ...mapState({
      hideMoney: "hideMoney",
      theme: "theme",
    }),
  },
  props: {
    isShow: {
      default: true,
      type: Boolean,
      required: false,
    },
    refresherEnabled:{
      default:true,
      required:false,
      type:Boolean
    },
  },
  watch: {
    isShow(n, o) {
      if (n) {
        this.upDateData();
      }
    },
    tabActive(){
        this.upDateData();
    }
  },
  methods: {
      onRefresh(){
          if (this.refreshing) return;
          this.refreshing = true;
          this.fundAccount()
          this.personalAssets()
          setTimeout(() => {
              this.refreshing = false;
          }, 1000)
      },
      scroll(event){
        this.scrollTop = event.detail.scrollTop
      },
    omitTo: math.omitTo,
    // 计算和
    add: math.add,
    ...mapActions({
      setHide: "hideMoney",
    }),
    filterMoney(val) {
      if (this.hideMoney) return "******";
      return this.omitTo(val, 8);
    },

    ifShow(item) {
      // 搜索过滤
      let show =
        item.coin_name
          .toLocaleLowerCase()
          .indexOf(this.searchText.toLocaleLowerCase()) != -1;
      if (!this.hide) return true && show;

      // 0余额资金过滤
      let hasMoney =
        this.add(item.usable_balance, item.freeze_balance, item.priceDecimals) *
          1 !=
        0;
      return hasMoney && show;
    },
    fundAccount() {
      Wallet.fundAccount().then((res) => {
        this.list = res.data.list;
        this.otc=res.data
      });
    },
    personalAssets(e) {
      Wallet.personalAssets().then((res) => {
        this.account = res.data;
      });
    },
    // 获取合约列表
    accounts() {
      Contract.contractAccount().then((res) => {
        this.accountDetail = res.data;
      });
    },
    changtTab($ev) {
      this.tabActive = $ev.detail.name;
      this.upDateData();
    },
    // 刷新数据
    upDateData() {
      if (this.tabActive == 1) {
        this.accounts();
      } else if(this.tabActive == 0) {
        this.personalAssets();
        this.fundAccount();
      }else{
        this.fundAccount();
      }
    },
  },
  mounted() {
    this.show = true;
  },
  created() {
    this.upDateData();
  },
};
</script>

<style lang="scss" scoped>
.tabs-main {
  ::v-deep.van-tabs {
    width: 100%;
  }
  ::v-deep.van-tabs__wrap,
  ::v-deep.van-tabs__content {
    // width: 100%;
  }
  ::v-deep.van-tabs__content {
    flex: 1;
    overflow: hidden;
  }
  ::v-deep.van-pull-refresh {
    height: calc(100vh - 200px);
    overflow-y: auto;
  }
  ::v-deep.van-cell {
    background: transparent;
    &::after {
      border-width: 0;
    }
  }
  ::v-deep .van-cell__left-icon {
    color: $white;
  }
}
.bgb3 {
  background: url(../../static/img/bgb3.png) no-repeat;
  background-size: 100% auto;
  background-position: right bottom;
  &.bgb3-white {
    background-image: url(../../static/img/light/bgb3.png);
  }
}
.bgb3_n {
  background: url(../../static/img/bgb3_n.png) no-repeat;
  background-size: 100% auto;
  background-position: right bottom;
  &.bgb3-white {
    background-image: url(../../static/img/light/bgb3.png);
  }
}
.bgb4 {
  background: url(../../static/img/bgb4.png) no-repeat;
  background-size: 100% auto;
  background-position: right bottom;
}
.pos {
  position: relative;
}
.posa {
  position: absolute;
}
.rounded-ms{
    border-radius: 10px;
}
.p-y-xxs{
    padding: 5px 0;
}
.w-33{
    width: 30%;
}
.w-50{
    width: 50%;
}
.wallet{
    border-radius: 30px;
}
.text-none{
    text-decoration: none;
}
::v-deep .van-cell{
    background-color: $panel-3;
}
::v-deep .van-cell{
    background-color:transparent;
    padding: 0 10px;
}
::v-deep .van-cell::after{
    border: none;
}
.border-right{
	border-right: 1px solid #FFFFFF;
}
.bg-c{
	background: #2B2B2B;
}
.color-theme-3{
	color: #FFFFFF;
}
.bg-panel-4{
	background: #f6c927;
}
</style>